<template>
  <!--  <div class="min-h-screen bg-gray-50">-->
  <div>
    <!-- 顶部操作区 -->
    <div class="mb-6 flex items-center justify-between">
      <div class="flex items-center gap-4">
        <el-button type="primary" class="!rounded-button whitespace-nowrap" @click="handleCreate">
          <el-icon class="mr-1">
            <Plus />
          </el-icon>新建上线任务
        </el-button>
      </div>
      <div class="flex items-center gap-4">
        <div class="relative">
          <el-input v-model="searchKey" placeholder="搜索项目名称" class="w-64" :prefix-icon="Search"
            @keyup.enter="handleSearch" />
        </div>
        <el-select v-model="status" placeholder="状态" class="w-32" @change="handleStatusChange">
          <el-option label="全部" :value="1" />
          <el-option label="我的" :value="2" />
        </el-select>
        <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" class="w-72" @change="handleDateChange" format="YYYY-MM-DD"
          value-format="YYYY-MM-DD" />
      </div>
    </div>
    <!-- 表格区域 -->
    <el-table :data="tableData" border style="width: 100%;" max-height="700">
      <el-table-column prop="creator" label="项目名称" width="140" align="center">
        <template #default="{ row }">
          {{ getItemName(row.itemItemId) }}
          <el-badge style="margin-top: 10px;" v-if="row.isSupplementaryOnlineTime === 2" value="补" class="ml-1" />
        </template>
      </el-table-column>
      <el-table-column label="任务名称" min-width="160" align="center">
        <template #default="{ row }">
          <div class="flex items-center">
            <span>{{ row.onlineTaskName }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" min-width="160" align="center">
        <template #default="{ row }">
          <div class="flex items-center">
            <span>{{ row.createAt }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="上线评审时间" width="190" align="center">
        <template #default="{ row }">
          <el-button class="!rounded-button whitespace-nowrap" @click="handleSetReviewTime(row)">
            {{ row.onlineReviewTime || '设置时间' }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="上线时间" width="190" align="center">
        <template #default="{ row }">
          <el-button class="!rounded-button whitespace-nowrap" @click="handleSetDeployTime(row)">
            {{ row.onlineTime || '设置时间' }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="130" align="center">
        <template #default="{ row }">
          <el-tag :type="getStatusText(row).type">{{ getStatusText(row).text }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="创建人" width="100" align="center">
        <template #default="{ row }">
          {{ row.onlineTaskCreateUserName }}
        </template>
      </el-table-column>
      <el-table-column label="关联需求" width="120" align="center">
        <template #default="{ row }">
          <el-button class="!rounded-button whitespace-nowrap" @click="showRequirements(row)">
            {{ row.requirementsCount }} 个需求
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="参与人员" width="100" align="center">
        <template #default="{ row }">
          <el-button class="!rounded-button whitespace-nowrap" @click="showParticipants(row)">
            {{ row.bearContentsCount }} 人
          </el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="createTime" label="创建时间" width="180">
        <template #default="{ row }">
          {{ row.createAt }}
        </template>
      </el-table-column> -->
      <el-table-column label="操作" width="460" fixed="right" align="center">
        <template #default="{ row }">
          <el-button type="primary" class="!rounded-button whitespace-nowrap bg-blue-500 hover:bg-blue-600" size="small"
            @click="handleMeetingNotes(row)">
            <el-icon class="mr-1">
              <Document />
            </el-icon>会议纪要
          </el-button>
          <el-button type="success" class="!rounded-button whitespace-nowrap bg-green-500 hover:bg-green-600"
            size="small" @click="handleOnlineResources(row)">
            <el-icon class="mr-1">
              <Promotion />
            </el-icon>
            上线资源
          </el-button>
          <el-button type="warning" class="!rounded-button whitespace-nowrap" size="small"
            @click="handleGuardians(row)">
            <el-icon class="mr-1">
              <UserFilled />
            </el-icon>保障人
          </el-button>
          <el-button type="info" class="!rounded-button whitespace-nowrap" size="small" @click="handleEdit(row)">
            <el-icon class="mr-1">
              <Edit />
            </el-icon>编辑
          </el-button>
          <el-button type="danger" class="!rounded-button whitespace-nowrap bg-red-500 hover:bg-red-600" size="small"
            @click="handleDelete(row)">
            <el-icon class="mr-1">
              <Delete />
            </el-icon>删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 翻页区域 -->
    <div class="mt-4 flex justify-end">
      <!-- <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
        :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next"
        @current-change="handleBugListPageChange" /> -->

      <Pagination v-model:currten-page="currentPage" :page-size="pageSize" :total="total"
        @size-change="handleSizeChange" @current-change="handleBugListPageChange"></Pagination>
    </div>

    <!-- 保障人弹窗 -->
    <el-dialog v-model="guarantorsVisible" title="保障人" width="800px">
      <div class="mb-4 flex items-center gap-4">
        <el-button type="primary" class="!rounded-button whitespace-nowrap" @click="openDialogGuarantorsVisible()">
          <el-icon class="mr-1">
            <Plus />
          </el-icon>添加保障人
        </el-button>
      </div>
      <el-table :data="currentGuarantors" style="width: 100%">
        <el-table-column prop="userName" label="姓名" width="auto" />
        <el-table-column prop="userPhone" label="手机号" width="auto" />
        <el-table-column label="操作" width="100" fixed="right">
          <template #default="{ row }">
            <el-button type="danger" class="!rounded-button whitespace-nowrap" @click="handleRemoveGuarantor(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>




    <!-- 添加保障人弹窗 -->
    <el-dialog v-model="addGuarantorVisible" title="添加保障人" width="500px" append-to-body>
      <div class="mb-4">
        <el-input v-model="guarantorSearchInput" placeholder="搜索保障人" class="!rounded-lg text-sm">
          <template #prefix>
            <el-icon class="text-gray-400">
              <Search />
            </el-icon>
          </template>
        </el-input>
      </div>
      <el-table :data="filteredAvailableGuarantors" style="width: 100%" max-height="300px"
        @selection-change="handleGuarantorSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="userName" label="姓名" min-width="120" />
        <el-table-column prop="phone" label="手机号" width="150" />
      </el-table>
      <template #footer>
        <div class="flex justify-end">
          <el-button @click="addGuarantorVisible = false">取消</el-button>
          <el-button type="primary" class="!rounded-button whitespace-nowrap"
            @click="confirmAddGuarantors">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 需求弹窗 -->
    <el-dialog v-model="requirementsVisible" title="关联需求" width="1200px">
      <div class="mb-4">
        <el-button type="primary" class="!rounded-button whitespace-nowrap" @click="OpenAddRequirement">
          <el-icon class="mr-1">
            <Plus />
          </el-icon>添加需求
        </el-button>
      </div>
      <el-table :data="currentRequirements" style="width: 100%">
        <el-table-column prop="requirementName" label="需求名称" min-width="180" />
        <el-table-column prop="requirementRelevances" label="研发" width="120" />
        <el-table-column prop="contactTestNames" label="测试" width="120" />
        <el-table-column prop="beginTime" label="开始时间" width="160" />
        <el-table-column prop="endTime" label="结束时间" width="160" />
        <el-table-column label="操作" width="100" fixed="right">
          <template #default="{ row }">
            <el-button type="danger" class="!rounded-button whitespace-nowrap" @click="handleRemoveRequirement(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 添加需求弹窗 -->
    <el-dialog v-model="addRequirementVisible" title="添加需求" width="900px" append-to-body>
      <el-table :data="availableRequirements" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="requirementName" label="需求名称" min-width="200" />
        <el-table-column prop="requirementRelevances" label="研发" width="120" />
        <el-table-column prop="contactTestNames" label="测试" width="120" />
        <el-table-column prop="beginTime" label="开始时间" width="160" />
        <el-table-column prop="endTime" label="结束时间" width="160" />
      </el-table>
      <template #footer>
        <div class="flex justify-end">
          <el-button @click="addRequirementVisible = false">取消</el-button>
          <el-button type="primary" class="!rounded-button whitespace-nowrap"
            @click="confirmAddRequirements">确定</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 参与人弹窗 -->
    <el-dialog v-model="participantsVisible" title="参与人员" width="800px">
      <div class="mb-4">
        <el-button type="primary" class="!rounded-button whitespace-nowrap" @click="openAddParticipantVisible()">
          <el-icon class="mr-1">
            <Plus />
          </el-icon>添加成员
        </el-button>
      </div>
      <el-table :data="currentParticipants" style="width: 100%">
        <el-table-column prop="bearUserName" label="姓名" min-width="120" />
        <el-table-column prop="bearType" label="角色" width="120">
          <template #default="{ row }">

            <el-tag :type="getRoleStatusType(row.bearType)"> {{ getRoleName(row.bearType) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="bearContent" label="负责内容" min-width="200" />
        <el-table-column label="操作" width="200" fixed="right" align="center">
          <template #default="{ row }">

            <el-button type="primary" class="!rounded-button whitespace-nowrap"
              @click="openUpdateParticipantVisible(row)">
              编辑
            </el-button>

            <el-button type="danger" class="!rounded-button whitespace-nowrap"
              @click="handleRemoveRequirementTaskPersion(row.ID)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 添加参与人弹窗 -->
    <el-dialog v-model="addParticipantVisible" title="添加参与人" width="500px" append-to-body>
      <el-form :model="newParticipant" label-width="100px">
        <el-form-item label="姓名">
          <el-select v-model="newParticipant.name" filterable placeholder="请选择人员" class="w-full">
            <el-option v-for="person in availablePersons" :key="person.uuid" :label="person.nickName"
              :value="person.uuid">
              <div class="flex items-center">
                <span>{{ person.nickName }}</span>
              </div>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="newParticipant.role" placeholder="请选择角色" class="w-full">
            <el-option label="研发" :value="1" />
            <el-option label="运维" :value="2" />
            <el-option label="测试" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="负责内容">
          <el-input v-model="newParticipant.duty" type="textarea" :rows="3" placeholder="请输入负责内容" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="flex justify-end">
          <el-button @click="addParticipantVisible = false">取消</el-button>
          <el-button type="primary" class="!rounded-button whitespace-nowrap"
            @click="confirmAddParticipant">确定</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 编辑参与人弹窗 -->
    <el-dialog v-model="updateParticipantVisible" title="编辑参与人" width="500px" append-to-body>
      <el-form :model="newParticipant" label-width="100px">
        <el-form-item label="姓名">
          <el-select v-model="newParticipant.name" filterable placeholder="请选择人员" class="w-full">
            <el-option v-for="person in availablePersons" :key="person.uuid" :label="person.nickName"
              :value="person.uuid">
              <div class="flex items-center">
                <span>{{ person.nickName }}</span>
              </div>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="newParticipant.role" placeholder="请选择角色" class="w-full">
            <el-option label="研发" :value="1" />
            <el-option label="运维" :value="2" />
            <el-option label="测试" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="负责内容">
          <el-input v-model="newParticipant.duty" type="textarea" :rows="3" placeholder="请输入负责内容" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="flex justify-end">
          <el-button @click="updateParticipantVisible = false">取消</el-button>
          <el-button type="primary" class="!rounded-button whitespace-nowrap"
            @click="confirmUpdateParticipant">确定</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 新建上线任务弹窗 -->
    <el-dialog v-model="createTaskVisible" title="新建上线任务" width="500px">
      <el-form :model="newTask" label-width="100px">
        <el-form-item label="所属项目" required>
          <el-select v-model="newTask.itemItemId" placeholder="请选择项目" class="w-full" filterable>
            <el-option v-for="item in allItems" :key="item.ID" :label="item.itemName" :value="item.ID" />
          </el-select>
        </el-form-item>
        <el-form-item label="任务名称" required>
          <el-input v-model="newTask.onlineTaskName" placeholder="请输入任务名称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="flex justify-end">
          <el-button @click="createTaskVisible = false">取消</el-button>
          <el-button type="primary" class="!rounded-button whitespace-nowrap" @click="confirmCreateTask">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 修改上线任务弹窗 -->
    <el-dialog v-model="updateTaskVisible" title="修改上线任务" width="500px">
      <el-form :model="newTask" label-width="100px">
        <el-form-item label="任务名称" required>
          <el-input v-model="newTask.onlineTaskName" placeholder="请输入任务名称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="flex justify-end">
          <el-button @click="updateTaskVisible = false">取消</el-button>
          <el-button type="primary" class="!rounded-button whitespace-nowrap" @click="confirmUpdateTask">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 会议纪要弹窗 -->
    <el-dialog v-model="meetingNotesDialogVisible" title="会议纪要" width="800px">
      <el-form :model="meetingNotesForm" label-width="100px">
        <el-form-item label="会议纪要">
          <el-input v-model="meetingNotesForm.content" type="textarea" :rows="5" placeholder="请输入会议纪要内容..." />
        </el-form-item>

        <el-form-item label="参与人员">
          <div class="mb-4">
            <el-button type="primary" class="!rounded-button whitespace-nowrap" @click="openAddParticipantVisible()">
              <el-icon class="mr-1">
                <Plus />
              </el-icon>添加参与人
            </el-button>
          </div>
          <el-table :data="currentParticipants" border style="width: 100%">
            <el-table-column prop="bearUserName" label="姓名" width="120" />
            <el-table-column prop="bearType" label="角色" width="120">
              <template #default="{ row }">
                <el-tag :type="getRoleStatusType(row.bearType)">
                  {{ getRoleName(row.bearType) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="负责内容">
              <template #default="{ row }">
                <el-input v-model="row.bearContent" placeholder="请输入负责内容"
                  @change="handleParticipantContentChange(row)" />
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120" fixed="right">
              <template #default="{ row }">
                <el-button type="danger" class="!rounded-button whitespace-nowrap"
                  @click="handleRemoveRequirementTaskPersion(row.ID)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="flex justify-end">
          <el-button @click="meetingNotesDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveMeetingNotes">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 修改后的上线资源弹窗部分 -->
    <el-dialog v-model="showDialog" title="上线资源" width="50%" :close-on-click-modal="false">
      <el-form :model="onlineRemarkForm" label-width="120px" label-position="left" ref="formRef">
        <!-- 后端上线分支 -->
        <el-form-item label="后端上线分支" prop="backendBranch">
          <el-input v-model="onlineRemarkForm.onlineBackendBranch" placeholder="请输入后端上线分支名称" clearable>
            <template #prepend>
              <el-icon>
                <Link />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>

        <!-- 前端上线分支 -->
        <el-form-item label="前端上线分支" prop="frontendBranch">
          <el-input v-model="onlineRemarkForm.onlieFrontendBranch" placeholder="请输入前端上线分支名称" clearable>
            <template #prepend>
              <el-icon>
                <Link />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>

        <!-- 修改为可增减的上线资源地址输入 -->
        <el-form-item label="上线资源地址" prop="resources">
          <div class="resource-list">
            <div v-for="(resource, index) in resourceList" :key="index" class="resource-item">
              <el-input v-model="resourceList[index]" placeholder="请输入资源地址" clearable class="resource-input">
                <template #append>
                  <el-button @click="removeResource(index)" :icon="Delete" />
                </template>
              </el-input>
            </div>
            <el-button type="primary" @click="addResource" class="add-resource-btn" :icon="Plus">
              添加资源
            </el-button>
          </div>
        </el-form-item>


        <!-- 上线脚本 -->
        <el-form-item label="上线脚本" prop="script">
          <el-tabs v-model="scriptInputType" class="script-tabs">
            <el-tab-pane label="填写脚本" name="input">
              <el-input v-model="onlineRemarkForm.onlineScripts" type="textarea" placeholder="请输入上线脚本内容" :rows="8"
                class="w-full" />
            </el-tab-pane>
            <el-tab-pane label="上传脚本" name="upload">
              <el-input v-model="onlineRemarkForm.onlineScripts" type="textarea" :rows="3"
                placeholder="请输入脚本地址，多个地址用|分隔" clearable />
            </el-tab-pane>
          </el-tabs>
        </el-form-item>

        <!-- 上线内容备注 -->
        <el-form-item label="上线备注" prop="remark">
          <el-input v-model="onlineRemarkForm.onlineRemarks" type="textarea" :rows="3" placeholder="请填写上线内容说明"
            maxlength="200" show-word-limit />
        </el-form-item>

        <!-- 上线报告地址 -->
        <el-form-item label="上线报告地址" prop="onlineReport">
          <el-input v-model="onlineRemarkForm.onlineReport" placeholder="请输入上线报告地址" clearable>
            <template #prepend>
              <el-icon>
                <Link />
              </el-icon>
            </template>
            <template #append>
              <el-button 
                :icon="Promotion" 
                @click="openReportLink(onlineRemarkForm.onlineReport)"
                :disabled="!onlineRemarkForm.onlineReport"
              />
            </template>
          </el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDialog = false">取消</el-button>
          <el-button type="primary" @click="handleSubmitOnlineRemark">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>




<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Plus, Search, Delete, Promotion } from '@element-plus/icons-vue';
import {
  PostCreateOfflineRequirement,
  PostGetOfflineRequirement, //获取所有的待填写任务列表
  GetGetOnlineTaskRequirements,// 获取上线任务绑定的需求列表
  PostDeleteOnlineTaskInTasks,// 删除上线任务的一个需求
  GetGetOfflineRequirementTrues,// 获取可以选择的上线评审的需求
  PostSelectOfflineRequirements,//选择上线任务的需求
  GetGetOnlineTaskMsg,// 查询上线任务上线参与人
  GetRoleUsers,//根据权限获取人员信息
  PostAddOnlineTaskInUser,//添加上线参与人
  PostUpdateOnlineTaskInUser,//修改上线参与人
  PostDeleteOnlineTaskInUser,// 删除上线任务上线参与人
  PostUpdateOfflineRequirement,// 更新上线任务名称
  GetDeleteOnlineTaskById,//删除上线任务
  PostDetermineOfflineTime,// 指定上线评审时间(支持重新指定也就是修改)
  PostDetermineOnlineTime,// 指定上线时间(支持重新指定也就是修改)
  PostAddOnlieTaskMeetingNotes,// 填写上线评审会议纪要
  PostAddOnlieTaskResources,// 填写上线资源
  GetGetOnlineTaskGuarantors,// 获取所有可选择保障人员
  PostAddOnlineTaskGuarantors,//添加报障人
  GetFindOnlineTaskGuarantors,//查询上线任务保障人员
  GetDeleteOnlineTaskGuarantors,//删除上线任务保障人员
} from "@/api/newDemands/index";
import {
  getItemList, //获取所有的待填写任务列表
} from "@/api/common/index";
import { onBeforeMount, computed } from 'vue';
import Pagination from "@/components/Pagenation/index.vue";



const loading = ref(false);
const searchKey = ref('');
const status = ref('');
const dateRange = ref(['', '']);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(100);
const selectedRows = ref();
const selectIds = ref();
const requirementsVisible = ref(false);
const participantsVisible = ref(false);
const addRequirementVisible = ref(false);
const availableRequirements = ref();
const openOnlineTask = ref();
const openOnlineTaskItemId = ref();
const selectedRequirements = ref<number[]>([]);
const currentRequirements = ref();//上线任务绑定的需求
// 报障人
const guarantorsVisible = ref(false);
const addGuarantorVisible = ref(false);
const guarantorSearchInput = ref('');
const selectedGuarantors = ref<any[]>([]);
const currentGuarantors = ref();
const availableGuarantors = ref();
const filteredAvailableGuarantors = computed(() => {
  const searchKey = guarantorSearchInput.value.toLowerCase();
  return availableGuarantors.value.filter((person: any) =>
    person.userName.toLowerCase().includes(searchKey) ||
    person.phone.includes(searchKey)
  );
});
const handleGuarantorSelectionChange = (rows: any[]) => {
  selectedGuarantors.value = rows;
};
const selectedRow = ref<any>(null);
const confirmAddGuarantors = () => {
  if (selectedGuarantors.value.length === 0) {
    ElMessage.warning('请选择保障人');
    return;
  }
  if (!selectedRow.value.guarantors) {
    selectedRow.value.guarantors = [];
  }


  addOnlineTaskGuarantors(selectedGuarantors.value)
  addGuarantorVisible.value = false;
  selectedGuarantors.value = [];
};

const handleGuardians = async (row: any) => {
  openOnlineTask.value = row.ID
  findOnlineTaskGuarantors()
  selectedRow.value = row;
  if (!row.guarantors) {
    row.guarantors = [];
  }
  guarantorsVisible.value = true;
  const { data } = await GetGetOnlineTaskGuarantors();
  if (data.code == 200) {
    availableGuarantors.value = data.data
  } else {
    ElMessage.error(data.msg)
  }
};
const handleRemoveGuarantor = (row: any) => {
  ElMessageBox.confirm('确定要移除该保障人吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteOnlineTaskGuarantors(row)
  });
};
const openDialogGuarantorsVisible = async () => {
  addGuarantorVisible.value = true;
}





// 添加保障人
const addOnlineTaskGuarantors = async (guarantors: any) => {
  const { data } = await PostAddOnlineTaskGuarantors({
    "onlineTaskId": openOnlineTask.value,
    "guarantors": guarantors
  })
  if (data.code == 200) {
    ElMessage.success(data.msg)
    findOnlineTaskGuarantors()
  } else {
    ElMessage.error(data.msg)
  }
}
// 查询保障人
const findOnlineTaskGuarantors = async () => {
  const { data } = await GetFindOnlineTaskGuarantors(openOnlineTask.value)
  if (data.code == 200) {
    currentGuarantors.value = data.data
  } else {
    ElMessage.error(data.msg)
  }
}
// 查询保障人
const deleteOnlineTaskGuarantors = async (row: any) => {
  const { data } = await GetDeleteOnlineTaskGuarantors(row.ID)
  if (data.code == 200) {
    findOnlineTaskGuarantors()
    ElMessage.success(data.msg)
  } else {
    ElMessage.error(data.msg)
  }
}



// 获取所有用户
const availablePersons = ref();
const getRolePersions = async () => {
  const { data } = await GetRoleUsers("111|222|333|444|555|666|777|999")
  if (data.code == 200) {
    availablePersons.value = data.data;
  } else {
    ElMessage.error(data.msg)
  }
}


const newParticipant = ref({
  name: '',
  role: 1,
  duty: ''
});
const currentParticipants = ref([]);//上线参与人
const addParticipantVisible = ref(false);
const updateParticipantVisible = ref(false);

// 添加上线参与人
const confirmAddParticipant = () => {
  if (!newParticipant.value.name || !newParticipant.value.role || !newParticipant.value.duty) {
    ElMessage.warning('请填写完整信息');
    return;
  }

  addOnlineTaskInUser();//添加上线参与人
  getAllOnlineTasks();
  addParticipantVisible.value = false;
  // 重置表单
  newParticipant.value = {
    name: '',
    role: 1,
    duty: ''
  };
};

// 修改上线参与人
const confirmUpdateParticipant = () => {
  if (!newParticipant.value.name || !newParticipant.value.role || !newParticipant.value.duty) {
    ElMessage.warning('请填写完整信息');
    return;
  }

  updateOnlineTaskInUser();//更新上线参与人

  updateParticipantVisible.value = false;
  // 重置表单
  newParticipant.value = {
    name: '',
    role: 1,
    duty: ''
  };
};

// 获取表格状态
const getRoleStatusType = (status: string) => {
  const map: Record<string, string> = {
    1: 'primary',
    2: 'warning',
    3: 'success',
  };
  return map[status] || 'info';
};
const getStatusText = (onlineTask: any) => {

  if (onlineTask.onlineTaskStatus == 3) {
    return { type: "success", text: "已上线" }
  } else if (onlineTask.onlineReviewTime == null) {
    return { type: "primary", text: "待发起上线评审" }
  } else if (onlineTask.onlieTaskMeetingNotes == '') {
    return { type: "warning", text: "待填写会议纪要" }
  } else if (onlineTask.onlineTime == null) {
    return { type: "success", text: "待确定上线时间" }
  } else if (onlineTask.onlineTime != null) {
    return { type: "success", text: "等待上线" }
  } else {
    return { type: "info", text: "未知" }
  }


};
const createTaskVisible = ref(false);
const updateTaskVisible = ref(false);
const newTask = ref({
  onlineTaskName: `${new Date().toISOString().split('T')[0]}上线任务`,
  itemItemId: 3,
  reviewTime: '',
  deployTime: ''
});
const handleCreate = () => {
  createTaskVisible.value = true;
  getAllItems()//获取所有的项目
  newTask.value = {
    onlineTaskName: `${new Date().toISOString().split('T')[0]}上线任务`,
    itemItemId: 3,
    reviewTime: '',
    deployTime: ''
  };
};


// 添加参与人弹框
const openAddParticipantVisible = () => {
  addParticipantVisible.value = true;
  getRolePersions();
}

// 编辑参与人弹框
const onileTaskUserId = ref();
const openUpdateParticipantVisible = (row: any) => {
  onileTaskUserId.value = row.ID,
    updateParticipantVisible.value = true;
  newParticipant.value.name = row.bearUserUUID,
    newParticipant.value.role = row.bearType,
    newParticipant.value.duty = row.bearContent,
    getRolePersions();
}


// 添加上线参与人
const addOnlineTaskInUser = async () => {

  const { data } = await PostAddOnlineTaskInUser({
    "onlineTaskId": openOnlineTask.value,
    "uuid": newParticipant.value.name,
    "persionRole": newParticipant.value.role,
    "bearContent": newParticipant.value.duty,
  });

  if (data.code == 200) {
    getOnlineTaskMsg();
  } else {
    ElMessage.error(data.msg)
  }

}
// 修改上线参与人
const updateOnlineTaskInUser = async () => {

  const { data } = await PostUpdateOnlineTaskInUser({
    "id": onileTaskUserId.value,
    "uuid": newParticipant.value.name,
    "onlineTaskId": openOnlineTask.value,
    "persionRole": newParticipant.value.role,
    "bearContent": newParticipant.value.duty,
  });

  if (data.code == 200) {
    ElMessage.success(data.msg)
    getOnlineTaskMsg();
  } else {
    ElMessage.error(data.msg)
  }

}

const handleRemoveRequirementTaskPersion = (id: number) => {
  ElMessageBox.confirm('确定要删除该参与人吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteOnlineTaskInUser(id);
    getAllOnlineTasks();
  });
};

// 删除一个上线参与人
const deleteOnlineTaskInUser = async (id: number) => {
  const { data } = await PostDeleteOnlineTaskInUser({
    "onlineTaskId": openOnlineTask.value,
    "bcId": id,
  });
  if (data.code == 200) {
    getOnlineTaskMsg();
    ElMessage.success(data.msg)
  } else {
    ElMessage.error(data.msg)
  }
}



// 打开添加需求弹框
const OpenAddRequirement = () => {
  addRequirementVisible.value = true;
  getOfflineRequirementTrues(openOnlineTaskItemId.value)
}


// 获取可以选择上线评审的需求
const getOfflineRequirementTrues = async (id: number) => {
  const { data } = await GetGetOfflineRequirementTrues(id)
  if (data.code == 200) {
    availableRequirements.value = data.data;
  } else {
    ElMessage.error(data.msg)
  }
}





// 返回项目名称
const getItemName = (id: number) => {
  if (!allItems.value || allItems.value.length === 0) {
    return "未知";
  }
  const itemMap = allItems.value.map((item: any) => ({
    "id": item.ID,
    "itemName": item.itemName,
  }));
  const item = itemMap.find((item: any) => item.id == id)
  return item ? item.itemName : "未知"
}



// 获取角色名称
const getRoleName = (braeType: number) => {
  if (braeType == 1) {
    return "研发"
  } else if (braeType == 2) {
    return "运维"
  } else if (braeType == 3) {
    return "测试"
  } else {
    return "未知"
  }
}


// 创建上线任务
const confirmCreateTask = async () => {
  if (!newTask.value.itemItemId || !newTask.value.onlineTaskName) {
    ElMessage.warning('请填写完整信息');
    return;
  }
  // 创建上线任务
  loading.value = true;
  const { data } = await PostCreateOfflineRequirement({
    "onlineTaskName": newTask.value.onlineTaskName,
    "itemItemId": newTask.value.itemItemId
  })
  if (data.code == 200) {
    loading.value = false;
    createTaskVisible.value = false;
    getAllOnlineTasks();
  } else {
    loading.value = false;
    ElMessage.error(data.msg);
  }

};

// 修改上线任务
const confirmUpdateTask = async () => {
  if (!newTask.value.onlineTaskName) {
    ElMessage.warning('请填写完整信息');
    return;
  }
  // 修改上线任务
  loading.value = true;
  const { data } = await PostUpdateOfflineRequirement({
    "onlineTaskId": openOnlineTask.value,
    "onlineTaskName": newTask.value.onlineTaskName,
  })
  if (data.code == 200) {
    updateTaskVisible.value = false;
    loading.value = false;
    createTaskVisible.value = false;
    ElMessage.success(data.msg);
    getAllOnlineTasks();
  } else {
    loading.value = false;
    ElMessage.error(data.msg);
  }

};



// 上线资源填写或查看
const handleOnlineResources = (row: any) => {
  showDialog.value = true;
  openOnlineTask.value = row.ID;

  // 修复回显问题：正确处理以|连接的资源地址
  console.log(row, '原始资源地址');
  if (row.onlineResources) {
    // 分割字符串并过滤空值
    const resources = row.onlineResources.split('|')
      .map((item: any) => item.trim())
      .filter((item: any) => item !== '');

    console.log('分割后的资源地址:', resources);
    // 如果分割后有内容则使用，否则初始化一个空输入框
    resourceList.value = resources.length > 0 ? resources : [''];
  } else {
    resourceList.value = [''];
  }

  // 初始化表单数据
  onlineRemarkForm.value = {
    onlineTaskId: row.ID,
    onlineBackendBranch: row.onlineBackendBranch || '',
    onlieFrontendBranch: row.onlieFrontendBranch || '',
    onlineResources: row.onlineResources || '',
    onlineScripts: row.onlineScripts || '',
    onlineRemarks: row.onlineRemarks || '',
    onlineReport: row.onlineReport || ''
  };
}



// 填写会议纪要
const meetingNotesDialogVisible = ref(false);
const meetingNotesForm = ref({
  onlineTaskId: 0,
  content: '',
});

const handleMeetingNotes = (row: any) => {
  openOnlineTask.value = row.ID;
  meetingNotesForm.value = {
    onlineTaskId: row.ID,
    content: row.onlieTaskMeetingNotes || '',
  };
  getOnlineTaskMsg(); // 获取参与人员数据
  meetingNotesDialogVisible.value = true;
};

const handleParticipantContentChange = (participant: any) => {
  // 这里可以添加即时保存逻辑，或者等待用户点击保存按钮
};

const saveMeetingNotes = async () => {
  if (!meetingNotesForm.value.content) {
    ElMessage.warning('请填写会议纪要内容');
    return;
  }

  try {
    // 构建请求数据 - 确保使用最新的participants数据
    const requestData = {
      onlineTaskId: meetingNotesForm.value.onlineTaskId,
      onlineMeetingNotes: meetingNotesForm.value.content,
      taskMsg: [...currentParticipants.value].map((p: any) => ({
        id: p.ID,
        bearContent: p.bearContent
      }))
    };
    console.log('提交的参与人数据:', requestData.taskMsg); // 调试用

    // 保存会议纪要和参与人负责内容
    await addOnlieTaskMeetingNotes(requestData);
    getAllOnlineTasks();
  } catch (error) {
    ElMessage.error('保存失败');
  }
};


const addOnlieTaskMeetingNotes = async (reqBody: any) => {
  loading.value = true
  const { data } = await PostAddOnlieTaskMeetingNotes(reqBody)
  if (data.code == 200) {
    loading.value = false
    ElMessage.success(data.msg)
    meetingNotesDialogVisible.value = false;
  } else {
    ElMessage.error(data.msg)
  }
}

// 上线分支
const showDialog = ref(false)
const formRef = ref(null)
const scriptInputType = ref('input') // 'input' 或 'upload'
const resourceList = ref<string[]>(['']) // 资源地址列表
// 表单数据
const onlineRemarkForm = ref({
  onlineTaskId: 0,//操作的上线任务
  onlineBackendBranch: '',//后端上线分支
  onlieFrontendBranch: '',//前端上线分支
  onlineResources: '',//上线资源地址
  onlineScripts: '',//上线脚本
  onlineRemarks: '',//上线备注
  onlineReport: '',//上线报告地址
})

// 添加上线资源输入框
const addResource = () => {
  resourceList.value.push('')
}

// 删除上线资源输入框
const removeResource = (index: number) => {
  if (resourceList.value.length > 1) {
    resourceList.value.splice(index, 1)
  } else {
    ElMessage.warning('至少保留一个资源地址')
  }
}
// 提交表单
const handleSubmitOnlineRemark = async () => {
  // 拼接资源地址
  onlineRemarkForm.value.onlineResources = resourceList.value
    .filter(item => item.trim() !== '')
    .join('|');

  if (!onlineRemarkForm.value.onlineReport) {
    ElMessage.warning('请填写上线报告地址');
    return;
  }

  const { data } = await PostAddOnlieTaskResources({
    "onlineTaskId": openOnlineTask.value,
    "onlineBackendBranch": onlineRemarkForm.value.onlineBackendBranch,
    "onlieFrontendBranch": onlineRemarkForm.value.onlieFrontendBranch,
    "onlineResources": onlineRemarkForm.value.onlineResources,
    "onlineScripts": onlineRemarkForm.value.onlineScripts,
    "onlineRemarks": onlineRemarkForm.value.onlineRemarks,
    "onlineReport": onlineRemarkForm.value.onlineReport
  });
  if (data.code == 200) {
    ElMessage.success(data.msg)
    showDialog.value = false;
    getAllOnlineTasks();
    resetForm()
  } else {
    ElMessage.error(data.msg)
  }
}




// 上传后端包
const fileList = ref<any>([]);
/* const customUpload = async (options: any) => {
  const { file } = options;

  const formData = new FormData();
  formData.append('file', file);
  formData.append('fileType', 'onlineRemark');
  formData.append('fileTypeId', '9'); // 替换为实际值

  try {
    const response = await axios.post('/saferycom/file/upload_file', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
        'token': localStorage.getItem("TOKEN")
      }
    });

    return response.data.data;
  } catch (error) {
    console.error('上传失败:', error);
    throw error;
  }
}; */

const handleUploadProgress = (event: any, uploadFile: any) => {
  // Element Plus 会自动更新 file.percentage
}

const customUpload = async (options: any) => {
  try {
    const { file } = options;
    const formData = new FormData()
    formData.append('file', file)
    formData.append('fileType', 'onlineRemark');
    formData.append('fileTypeId', '9'); // 替换为实际值

    const response = await axios.post('/saferycom/file/upload_file', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
        'token': localStorage.getItem("TOKEN")
      },
      onUploadProgress: (progressEvent) => {
        if (progressEvent.total) {
          options.onProgress({
            percent: Math.round(
              (progressEvent.loaded * 100) / progressEvent.total
            )
          })
        }
      }
    })

    options.onSuccess(response)
  } catch (error) {
    options.onError(error)
  }
}


// 删除文件处理函数
const handleRemove = (file: any) => {
  const index = fileList.value.indexOf(file)
  if (index !== -1) {
    fileList.value.splice(index, 1)
    ElMessage.success('文件已删除')
  }
}

const getUploadStatusText = (status: any) => {
  const statusMap = {
    'ready': '等待上传',
    'uploading': '上传中',
    'success': '上传成功',
    'exception': '上传失败'
  }
  return statusMap[status as keyof typeof statusMap] || status
}

const handleUploadSuccess = (response: any, uploadFile: any) => {
  const filePath = response.resultFilePath;
  // 更新文件列表显示
  uploadFile.url = filePath; // 设置文件URL以便显示
  uploadFile.name = uploadFile.name || filePath.split('/').pop(); // 设置文件名

  ElMessage.success('文件上传成功');
};

const handleUploadError = (error: any) => {
  console.error('上传失败:', error);
  ElMessage.error('文件上传失败');
};

const openReportLink = (url: string) => {
  if (!url) return;
  
  // 验证URL格式
  try {
    const urlObj = new URL(url.startsWith('http') ? url : `https://${url}`);
    // 安全地打开链接
    window.open(urlObj.href, '_blank', 'noopener,noreferrer');
  } catch (e) {
    ElMessage.warning('请输入有效的URL地址');
  }
};

// 重置表单
const resetForm = () => {
  onlineRemarkForm.value = {
    onlineTaskId: 0,
    onlieFrontendBranch: '',
    onlineBackendBranch: '',
    onlineResources: '',
    onlineScripts: '',
    onlineRemarks: '',
    onlineReport: ''
  }
  resourceList.value = ['']
}


// 编辑
const handleEdit = (row: any) => {
  updateTaskVisible.value = true;
  openOnlineTask.value = row.ID;
  newTask.value.onlineTaskName = row.onlineTaskName,
    newTask.value.itemItemId = row.itemItemId

};
const handleDelete = (row: any) => {
  ElMessageBox.confirm('确定要删除该任务吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteOnlineTaskById(row)
  });
};
const handleSelectionChange = (rows: any[]) => {
  selectedRows.value = rows;
  const ids = selectedRows.value.map((item: any) => item.ID)
  selectIds.value = ids;
};


// 删除上线任务
const deleteOnlineTaskById = async (row: any) => {
  const { data } = await GetDeleteOnlineTaskById(row.ID);
  if (data.code == 200) {
    ElMessage.success(data.msg)
    getAllOnlineTasks();
  } else {
    ElMessage.error(data.msg)
  }
}




const confirmAddRequirements = async () => {
  const { data } = await PostSelectOfflineRequirements({
    "onlineTaskId": openOnlineTask.value,
    "selectRequirementIds": selectIds.value,
  })
  if (data.code == 200) {
    addRequirementVisible.value = false;
    selectedRequirements.value = [];
    selectIds.value = [];
    GetOnlineTaskRequirements(openOnlineTask.value);
    getAllOnlineTasks();
  } else {
    ElMessage.error(data.msg);
  }
};
// 设置上线评审时间
const handleSetReviewTime = async (row: any) => {
  try {
    const currentDate = row.reviewTime ? new Date(row.reviewTime) : new Date();
    const { value } = await ElMessageBox.prompt('', '设置上线评审时间', {
      inputType: 'datetime-local',
      inputValue: currentDate.toISOString().slice(0, 16),
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    });
    if (value) {
      const selectedTime = new Date(value);
      const year = selectedTime.getFullYear();
      const month = String(selectedTime.getMonth() + 1).padStart(2, '0');
      const day = String(selectedTime.getDate()).padStart(2, '0');
      const hours = String(selectedTime.getHours()).padStart(2, '0');
      const minutes = String(selectedTime.getMinutes()).padStart(2, '0');
      const seconds = String(selectedTime.getSeconds()).padStart(2, '0');

      const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      
      // 日期比较（精确到天）
      const selectedDate = new Date(value);
      selectedDate.setHours(0, 0, 0, 0);
      const today = new Date();
      today.setHours(0, 0, 0, 0);
      
      if (selectedDate < today) {
        await ElMessageBox.alert('此上线任务是补充上线任务，不算入绩效考核', '提示', {
          confirmButtonText: '确定',
          type: 'warning'
        });
      }
      determineOfflineTime(row.ID, formattedTime);
    }
  } catch (error) {
    // 用户取消操作，不做处理
  }
};



// 指定上线评审时间
const determineOfflineTime = async (id: any, reviewTime: any) => {
  const { data } = await PostDetermineOfflineTime({
    "onlineTaskId": id,
    "onlineReviewTime": reviewTime,
  })
  if (data.code == 200) {
    getAllOnlineTasks();
    ElMessage.success(data.msg)
  } else {
    ElMessage.error(data.msg)
  }
}


// 指定上线时间
const determineOnlineTime = async (id: any, reviewTime: any) => {
  const { data } = await PostDetermineOnlineTime({
    "onlineTaskId": id,
    "onlineReviewTime": reviewTime,
  })
  if (data.code == 200) {
    getAllOnlineTasks();
    ElMessage.success(data.msg)
  } else {
    ElMessage.error(data.msg)
  }
}



// 设置上线时间
const handleSetDeployTime = async (row: any) => {
  try {
    const currentDate = row.reviewTime ? new Date(row.reviewTime) : new Date();
    const { value } = await ElMessageBox.prompt('', '设置上线评审时间', {
      inputType: 'datetime-local',
      inputValue: currentDate.toISOString().slice(0, 16),
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    });
    if (value) {
      const selectedTime = new Date(value);
      const year = selectedTime.getFullYear();
      const month = String(selectedTime.getMonth() + 1).padStart(2, '0');
      const day = String(selectedTime.getDate()).padStart(2, '0');
      const hours = String(selectedTime.getHours()).padStart(2, '0');
      const minutes = String(selectedTime.getMinutes()).padStart(2, '0');
      const seconds = String(selectedTime.getSeconds()).padStart(2, '0');

      const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      determineOnlineTime(row.ID, formattedTime);
    }
  } catch (error) {
    // 用户取消操作，不做处理
  }
};



const handleRemoveRequirement = (row: any) => {
  ElMessageBox.confirm('确定要删除该需求吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    DeleteOnlineTaskInTasks(row);
  });
};

// 展示选择需求弹框
const showRequirements = (row: any) => {
  openOnlineTask.value = row.ID;
  openOnlineTaskItemId.value = row.itemItemId;
  GetOnlineTaskRequirements(row.ID);
  requirementsVisible.value = true;
};
const showParticipants = (row: any) => {
  openOnlineTask.value = row.ID;
  getOnlineTaskMsg();
  participantsVisible.value = true;
};

// 获取上线任务参与人
const getOnlineTaskMsg = async () => {
  const { data } = await GetGetOnlineTaskMsg(openOnlineTask.value)
  if (data.code == 200) {
    currentParticipants.value = data.data;
  } else {
    ElMessage.error(data.msg)
  }
}


// 删除上线任务中的一个需求
const DeleteOnlineTaskInTasks = async (row: any) => {
  const { data } = await PostDeleteOnlineTaskInTasks({
    "onlineTaskId": row.itemRequirementOnlieTaskId,
    "selectRequirementId": row.ID,
  })
  if (data.code == 200) {
    GetOnlineTaskRequirements(row.itemRequirementOnlieTaskId);
    getAllOnlineTasks();
  } else {
    ElMessage.error(data.msg)
  }

}



// 获取上线任务绑定的需求列表
const GetOnlineTaskRequirements = async (id: number) => {
  const { data } = await GetGetOnlineTaskRequirements(id)
  if (data.code == 200) {
    currentRequirements.value = data.data
  } else {
    ElMessage.error(data.msg)
  }
}



// 获取所有项目名称
const allItems = ref();
const allItemsCopy = ref();
const getAllItems = async () => {
  const { data } = await getItemList()
  if (data.code == 200) {
    allItems.value = data.data;
    allItemsCopy.value = data.data;
  }
}

// 更改每页条目数
const handleSizeChange = async (val: any) => {
  pageSize.value = val;
  currentPage.value = 1;
  getAllOnlineTasks();
};


//分页查询
const handleBugListPageChange = (page: number) => {
  currentPage.value = page
  getAllOnlineTasks();
}


const handleDateChange = (val: any) => {
  searchMode.value.beginTime = val[0]
  searchMode.value.endTime = val[1]
  getAllOnlineTasks();
}
const handleStatusChange = (val: any) => {
  searchMode.value.mySelf = val
  getAllOnlineTasks();
}
// 模糊查询
const handleSearch = () => {
  searchMode.value.onlineTaskName = searchKey.value
  getAllOnlineTasks();
}

const searchMode = ref({
  "onlineTaskName": "",
  "mySelf": 1,
  "beginTime": null,
  "endTime": null,
  "page": currentPage.value,
  "pageSize": pageSize.value
})


const tableData = ref();
// 获取所有的上线任务
const getAllOnlineTasks = async () => {
  loading.value = false;
  searchMode.value.page = currentPage.value;
  searchMode.value.pageSize = pageSize.value;
  const { data } = await PostGetOfflineRequirement(searchMode.value)

  if (data.code == 200) {
    tableData.value = data.data.list
    currentPage.value = data.data.page
    pageSize.value = data.data.pageSize
    total.value = data.data.total
    // loading.value = false;
  } else {
    ElMessage.error(data.msg);
  }
}



// 页面初始化调用接口
onMounted(async () => {
  getAllOnlineTasks();
});
onBeforeMount(async () => {
  getAllItems();
})

</script>



<style scoped>
.el-badge {
  vertical-align: middle;
  margin-left: 4px;
}

.el-input :deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #e5e7eb;
}

.el-input :deep(.el-input__wrapper):hover {
  box-shadow: 0 0 0 1px #409eff;
}

.el-select :deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #e5e7eb;
}

.el-select :deep(.el-input__wrapper):hover {
  box-shadow: 0 0 0 1px #409eff;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
}



/* 上线任务弹框样式 */
.script-tabs {
  @apply border border-gray-200 rounded-md p-2 w-full;
}

:deep(.el-tabs__content) {
  @apply p-0;
}

.script-textarea {
  min-height: 200px;
  @apply w-full;
}

:deep(.el-textarea__inner) {
  min-height: 200px !important;
  @apply w-full;
}

:deep(.el-upload__tip) {
  @apply mt-1;
}

.upload-demo {
  @apply w-full;
}

:deep(.el-upload) {
  @apply w-full;
}

:deep(.el-upload-dragger) {
  @apply w-full p-4;
}

.script-tabs {
  @apply border border-gray-200 rounded-md p-2 w-full;
}

:deep(.el-tabs__content) {
  @apply p-0;
}

:deep(.el-upload__tip) {
  @apply mt-1;
}

:deep(.el-icon--upload) {
  @apply text-2xl mb-2 text-gray-400;
}

:deep(.el-upload__text) {
  @apply text-sm text-gray-500;
}

/* 文件上传 */
.file-item {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 8px 0;
  border-bottom: 1px solid #eee;

  .file-info {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-bottom: 4px;

    .file-item-name {
      width: calc(100% - 90px);
      overflow-x: auto;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    ;

    .file-item-status {
      width: 50px;
      text-align: center;
      color: #666;
      font-size: 12px;
      margin-left: 10px;
    }

    ;
  }

  ;

  .el-progress {
    margin-top: 25px;
  }

  .delete.btn {
    text-align: right;
    width: 40px;
  }
}


/* 添加的样式 */
.resource-list {
  width: 100%;
}

.resource-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.resource-input {
  flex: 1;
  margin-right: 10px;
}

.add-resource-btn {
  display: flex;
  margin-top: 10px;
  width: 50%;
  justify-items: center;
  align-items: center;
}
</style>